<!--热榜列表页-->
<template>
    <van-tabs v-model="active">
        <van-tab title="搜索结果">
            <div class="body">
                <van-pull-refresh v-model="refreshing" @refresh="onRefresh" success-text="刷新成功">
                    <van-list
                            v-model="loading"
                            :finished="finished"
                            finished-text="没有更多了"
                            @load="onLoad"
                    >
                        <van-cell v-for="(item,index) in hotList" :key="index">
                            <van-skeleton title :row="1" v-if="looo"/>
                            <div class="middleCenter" v-else>
                                <div>
                                    <div class="picMig"
                                         :style="{'background-image': 'url('+item.bannerImgUrl+')','background-repeat':'no-repeat','background-size':'100%'}"></div>
                                </div>
                                <div>
                                    <span @click="changeDetail(item)">{{item.title}}</span>
                                    <p>
                                        <span style="color: #409EFF"
                                              @click="changeDetail(item)">{{item.articleSource}}</span><span
                                            style="margin-left: 10px;font-size: 12px;color: #999">{{item.createTime}}</span>
                                    </p>
                                    <span class="toSeeDetail" @click="changeDetail(item)">查看详情>></span>
                                </div>

                            </div>
                        </van-cell>
                    </van-list>
                </van-pull-refresh>
            </div>
        </van-tab>
    </van-tabs>
</template>

<script>
    import {listNews} from "../api/api";


    export default {
        name: "HotList.vue",
        data() {
            return {
                active: "",
                hotList: [],
                list: [],
                loading: false,
                finished: false,
                refreshing: false,
                looo: true,
            }
        },
        props:["text"],
        created() {
            listNews(1,47660,"",this.text).then(res=>{
               this.hotList = res.rows;
                this.looo = false;
            })
        },
        methods: {
            onLoad() {
                setTimeout(() => {
                    if (this.refreshing) {
                        this.list = [];
                        this.refreshing = false;
                    }

                    for (let i = 0; i < this.hotList; i++) {
                        this.list.push(this.list.length + 1);
                    }
                    this.loading = false;

                    if (this.list.length >= this.hotList.length) {
                        this.finished = true;
                    }
                }, 2000);
            },
            onRefresh() {
                // 清空列表数据
                this.finished = false;

                // 重新加载数据
                // 将 loading 设置为 true，表示处于加载状态
                this.loading = true;
                this.onLoad();

                setTimeout(() => {
                    // Toast('刷新成功');
                    this.isLoading = false;
                    this.count++;
                }, 1000);
                setTimeout(() => {
                    this.hotList.reverse()

                }, 1000);


            },
            changeDetail(item) {
                this.$router.push("/RotateDeatil?articleId=" + item.articleId)
            }
        },

    }
</script>

<style scoped lang="less">
    .body {
        height: calc(100vh - 120px);
        overflow: scroll;
    }

    .middleCenter {
        display: flex;
        padding: 0px;
        margin: 0px;
        box-sizing: border-box;
        justify-content: space-between;
        align-items: center;

        div:nth-of-type(2) {
            width: calc(100vw - 90px);
        }

        div:nth-of-type(1) {
            width: 120px;
            text-align: center;
            height: 100px;

            .picMig {
                width: 80%;
                height: 80%;
                margin: 20px auto;
                float: left;
            }
        }
    }

    .toSeeDetail {
        /*float: right;*/
        color: #409EFF;
        font-size: 12px;
    }

    /deep/ .van-cell {
        border-bottom: 1px solid #eaeaea;
    }

    /deep/ .van-cell {
        padding: 5px 16px;
    }
</style>
